<!-- 手机验证 -->
<template>
  <div class="home">
    <div class="tabBar">
      <img
        class="tabBar_icon"
        @click="goUserCenter"
        src="../../images/userCenter_icon.png"
      />
      <div
        class="tabItem"
        :class="{ tabBarItemSelect: isActive == 1 }"
        @click="tabSelect(1)"
      >
        电单车
      </div>
      <div
        class="tabItem"
        :class="{ tabBarItemSelect: isActive == 2 }"
        @click="tabSelect(2)"
      >
        还车点
      </div>
    </div>
    <template v-if="adList && adList.length > 0 && adShow">
      <div class="fullPopup"></div>
      <md-swiper
        class="dialog"
        :autoplay="5000"
        ref="swiper"
        :is-prevent="false"
        :has-dots="false"
      >
        <md-swiper-item :is-prevent="false" :key="$index" v-for="(item, $index) in adList">
          <img style="width: 100%; height: 100%" :src="item.img" v-on:click="bannerClickEvent(item.link)" />
        </md-swiper-item>
      </md-swiper>
      <img
        class="closeDialog"
        @click="closeModel"
        src="../../images/closeMod.png"
      />
    </template>
    <input
      type="file"
      @change="getUrl('file-url')"
      name=""
      id="file"
      value=""
      ref="filElem"
      style="display: none"
    />
    <div id="container"></div>
    <img
      class="handleButton"
      v-if="btnStatus == 0"
      @click="login()"
      src="../../images/icon_register@3x.png"
    />
    <img
      class="handleButton"
      v-if="btnStatus == 1"
      @click="scan()"
      src="../../images/icon_use@2x2.png"
    />
    <img
      class="location"
      @click="setCenter()"
      src="../../images/icon_location1@2x.png"
    />
    <img
      class="noFence"
      v-if="routerInfo.outFence"
      src="../../images/search.png"
    />
    <img
      class="noFence"
      style="width: 130px; margin-left: -65px"
      v-if="!routerInfo.outFence"
      src="../../images/unopen.png"
    />
    <img class="centerLocation" src="../../images/icon_locating_pin@3x.png" />
    <img
      v-if="hasUnpayOrder"
      class="payOrderIcon"
      @click="goPayOrder"
      src="../../images/payOrder.png"
    />

    <!-- 点击marker信息窗口 -->
    <div class="markerInfo" v-if="carInfoDialog">
      <div class="markerTitle">
        <div class="distance">距离{{ currentCarInfo.distance }}米</div>
        <div class="bno">
          车牌：<span>{{ currentCarInfo.customno }}</span>
        </div>
      </div>
      <div class="markerContent">
        <div class="contentLeft">
          <div>
            <span class="useMileage">可行驶里程</span
            ><span
              class="mileage"
              style="font-size: 0.6rem; margin: 0 0.16rem"
              >{{ currentCarInfo.mileage }}</span
            >
            <span class="mileage">Km</span>
          </div>
          <div class="reserveBtn" @click="reserve">预约用车</div>
        </div>
        <div class="contentRight">
          <div
            class="contentItem"
            @click="findBell"
            v-if="!findBellbuttonClick"
          >
            <img src="../../images/icon_bell@2x.png" class="aboutIcon" />
            <div style="margin-top: 0.16rem">寻车铃</div>
          </div>
          <div
            class="contentItem"
            v-if="findBellbuttonClick"
            style="opacity: 0.4"
          >
            <img src="../../images/icon_bell@2x.png" class="aboutIcon" />
            <div style="margin-top: 0.16rem">寻车铃</div>
          </div>
          <div class="contentItem" @click="unlockCar">
            <img src="../../images/icon_unlock@2x.png" class="aboutIcon" />
            <div style="margin-top: 0.16rem">开锁</div>
          </div>
        </div>
      </div>
      <div class="rule">
        计费规则：{{ powerConfig.chargeConfig.basicTime }}分钟内，收费{{
          powerConfig.chargeConfig.basicMoney
        }}元，超出部分每{{ powerConfig.chargeConfig.addTime }}分钟，计费{{
          powerConfig.chargeConfig.addMoney
        }}元。免费预约{{
          powerConfig.apmConfig.time
        }}分钟，到时间未骑行预约自动取消
      </div>
    </div>

    <!-- 骑行信息 -->
    <div class="riderInfo" v-if="riderShow">
      <div class="riderTitle">
        <img src="../../images/customNo.png" />
        <div class="customnoTxt">车辆编号：{{ riderInfo.customno }}</div>
      </div>
      <div class="riderTips">{{ riderInfo.showTxt }}</div>
      <div class="riderContent">
        <div class="riderItem">
          <div>
            <span class="riderNum">{{ riderInfo.mileage }}</span
            ><span class="f12">km</span>
          </div>
          <div class="riderItemDesc">可行驶里程</div>
        </div>
        <div class="riderItem">
          <div>
            <span class="riderNum"
              >{{ riderInfo.min || "00" }}:{{ riderInfo.sec || "00" }}</span
            >
          </div>
          <div class="riderItemDesc">计费时间</div>
        </div>
        <div class="riderItem">
          <div>
            <span class="riderNum">{{ riderInfo.cost || 0 }}</span
            ><span class="f12">元</span>
          </div>
          <div class="riderItemDesc">用车费用</div>
        </div>
      </div>
      <div class="riderBottom">
        <div
          class="tempLockedButton"
          @click="tempLockClickEvent"
          v-if="riderInfo.vehicleStatus == 'driving'"
        >
          临时锁车
        </div>
        <div
          class="tempLockedButton"
          v-if="riderInfo.vehicleStatus == 'locking'"
          @click="tempUnlockClickEvent"
        >
          开锁
        </div>
        <div class="returnCarButton" v-if="!returnCarStatus" @click="returnCar">
          立即还车
        </div>
        <div
          class="returnCarButton"
          style="opacity: 0.4"
          v-if="returnCarStatus"
        >
          还车中
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import index from "./index.js";

export default {
  mixins: [index],
};
</script>

<style scoped lang="stylus">
@import './index.styl';
</style>
